"use client";
import { useId } from "react";

export const Logo = ({ className }: { className?: string }) => {
  const gradientId = useId();

  return (
    <svg
      data-name="hot-updater"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 447 652"
      className={className}
    >
      <defs>
        <linearGradient
          id={gradientId}
          x1="223.54"
          y1="0.36"
          x2="223.54"
          y2="711.23"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stopColor="#ff7f33" />
          <stop offset="0.4" stopColor="#f9602b" />
          <stop offset="0.76" stopColor="#f54c25" />
          <stop offset="1" stopColor="#f44523" />
        </linearGradient>
      </defs>
      <title>Hotupdater</title>
      <path
        d="M150.25,8.58c16.28,31.85,42.09,116-68.18,212.22C75.46,226.57,70,233,63.72,239.62c-28.48,30-84.71,114.89-55.82,207,.69,2.18,1.31,4.37,1.91,6.57,5.25,19.33,38.08,121,155.56,157.25a5.14,5.14,0,0,0,6-7.39c-14.72-26.53-46.07-96.89-8.89-162.55,0,0,11.5,44.5,50.5,83.5,6,6,14.72,15.64,19.53,21.23,14.47,16.77,32.24,53.55,1.82,98.18a5.63,5.63,0,0,0,6.85,8.34c75.64-32.1,333.29-164.6,128.68-410.85a7,7,0,0,0-12.46,4.15c-1.77,39.31-14.84,129-96.18,148.06a31.08,31.08,0,0,1-24.3-4.16c-13.34-8.9-25.41-32.06.53-92.3a250.9,250.9,0,0,1,20.12-37.29C282.78,220.56,356.18,79.83,157.33.77A5.64,5.64,0,0,0,150.25,8.58Z"
        fill={`url(#${gradientId})`}
      />
    </svg>
  );
};
